<script lang="ts" setup>
import { ref } from 'vue'
import CicleMenu from './CicleMenu.vue'
const items = Array.from(new Array(50), (_, k) => `${k}`)
const current = ref('5')
const radius = ref(500)
</script>
<template>
  <select v-model="current">
    <option v-for="(item, index) in items" :key="index">{{ item }}</option>
  </select>
  {{ current }}
  <CicleMenu
    :items="items"
    :style="{ width: `${2 * radius}px`, height: `${2 * radius}px` }"
    :offset="[0, radius]"
    :radius="radius"
    v-model:current="current"
  >
    <template #default="{ item }">
      <div
        style="
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        "
        :style="
          current === item
            ? {
                color: 'red',
                fontWeight: '900',
              }
            : {}
        "
      >
        {{ item }}
      </div>
    </template>
  </CicleMenu>
</template>
